<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: xiaobai
 * @Date: 2021-06-11 14:59:11
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-03-19 13:27:01
 * @FilePath: /huizhou_website/src/views/news/components/company_news.vue
-->
<template>
  <div class="news_contents"
    style="padding-top:10px">
    <img
      v-if="newsList.length==0"
      src="../../../assets/imgaes/loading.7.gif"
      style="height:300px;margin: 0 auto;display: block;">
    <div v-else
      class="news_contents_a" :class="isPhone == 'true'?'phone':''">
      <div class="news_items"
        v-for="(item,index) in newsList"
        :key="index">
        <div class="news_more"
          @click="gotoDetails(item)">
          <el-row
            :gutter="20">
            <el-col :md="6"
              :lg="6">
              <div
                style="height: 160px;text-align: center;overflow: hidden;">
                <el-image  :src="item.imgUrl" style="width:100%"></el-image>
              </div>
            </el-col>
            <el-col :md="15"
              :lg="15">
              <div
                class="items_content">
                <div
                  class="items_title">
                  {{item.title}}
                </div>
                <div class="items_dates" v-if="isPhone=='true'">发布时间：{{ item.time }}</div>
                <div
                  class="items_body">
                  <div
                    class="items_body_content">
                    <p>
                      {{item.introduction}}
                    </p>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :md="3"
            v-if="isPhone!='true'"
              :lg="3">
              <div
                class="items_date">
                <div
                  class="items_date_div">
                  <div>
                    <i class="el-icon-date"
                      style="font-size:20px"></i>
                  </div>
                  <span>{{item.time}}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-pagination
      :style="{'text-align': isPhone=='true'?'center':'right'}"
        style="margin-top: 20px;"
        :pagerCount="3"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        :layout="layout"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
     
      loading: true,
      newFirstObj: {},
      newsList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      isPhone: 'false',
      layout: 'total, sizes, prev, pager, next, jumper',
    }
  },
  mounted() {
    this.getList()
    if (window.localStorage.getItem('isPhone')) {
      this.isPhone = window.localStorage.getItem('isPhone')
      this.layout = 'total,prev,pager, next'
    }
    else {
      this.isPhone = 'false'
      this.layout= 'total, sizes, prev, pager, next, jumper'
    }
  },
  methods: {
    getList() {
      this.loading = true
      axios
        .post('/home/news', {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: 1
        })
        .then(res => {
          this.loading = false
          this.total = parseInt(res.data.data.total)
          const newsList = res.data.data.newsList
          newsList.map(item => {
            this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
          })
          this.newsList = newsList
          // this.newsList = newsList.slice(1, newsList.length)

          // const firstArr = newsList.slice(0, 1)
          // this.newFirstObj = firstArr[0]
          // this.newFirstObj.times = firstArr[0].time.substring(0, 10)
          // this.goTop()
        })
    },
    gotoDetails(item) {
      this.$router.push({
        path: '/news_details',
        query: {
          id: item.id
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getList()
    },
    goTop() {
      var timer = null
      cancelAnimationFrame(timer)
      timer = requestAnimationFrame(function fn() {
        var oTop = document.body.scrollTop || document.documentElement.scrollTop
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop = oTop - 50
          timer = requestAnimationFrame(fn)
        } else {
          cancelAnimationFrame(timer)
        }
      })
    }
  }
}
</script>

<style>
</style>